<template>
  <div class="node-info">
    <section v-show="cellType">
      <h3>{{ cellType }}</h3>
      <div>
        <p>标题：</p>
        <el-input type="text" v-model="cellInfo.cellName" />
      </div>
      <div>
        <p>信息：</p>
        <el-input
          :autosize="{ minRows: 4, maxRows: 8 }"
          type="textarea"
          v-model="cellInfo.cellDesc"
        ></el-input>
      </div>
      <div v-show="isSpecialNode">
        <p>脚本:</p>
        <el-input
          :autosize="{ minRows: 4, maxRows: 8 }"
          type="textarea"
          v-model="cellInfo.cellScript"
        ></el-input>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: "CellInfo",
  props: {
    curCell: {
      type: Object,
      default: null,
    }
  },
  data() {
    return {
      cellType: '',
      cellInfo: {
        cellName: "",
        cellDesc: "",
        cellScript: "",
      },
      isSpecialNode: false,
    };
  },
  watch: {
    curCell: {
      handler() {
        console.group(this.curCell.value)
        const cell = this.curCell.value;
        if (!cell) {
          this.cellType = "";
          return;
        }
        if (cell.isNode()) {
          this.cellType = "节点";
          this.cell.shape === "special-node"
            ? (this.isSpecialNode = true)
            : (this.isSpecialNode = false);
          this.cellInfo.cellName = cell.getAttrByPath("label/text");
        }
        if (cell.isEdge()) {
          this.cellType = "线";
          const linAttr = cell.getLabels()[0];
          this.cellInfo.cellName = linAttr ? linAttr.attrs.label.text : "";
        }
      },
      immediate: true,
      deep: true
    },
    'cellInfo.cellName': {
      handler() {
        this.$emit('changeNodeName', this.cellInfo.cellName)
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.node-info {
  padding: 10px;
  width: 20%;
  min-width: 250px;
  height: 600px;
  background: #d6d9da5d;
  border: 1px solid #000;
  margin-left: 10px;
  // box-shadow: #ccc 0 0 20px;
  section {
    h3 {
      border-bottom: 1px solid #ccc;
    }
    & > div {
      margin-top: 14px;
    }
  }
}
</style>
